<template>
    <div class="page-container">
        <div>
            <div class="operation-container">
                <el-button type="primary" @click="onPrint">打印</el-button>
            </div>
            <div id="deviceDispatchPrint" class="print-container">
                <div class="print-title">仪器作废申请单</div>
                <table class="table-class" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="print-label">项目名称</td>
                        <td class="print-input-content">
                            {{ form.projectName }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">调度设备</td>
                        <td class="print-table-content">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>仪器编号</th>
                                        <th>仪器名称</th>
                                        <th>仪器型号</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in form.deviceData">
                                        <td>{{ item.code }}</td>
                                        <td>{{ item.name }}</td>
                                        <td>{{ item.model }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <!-- <tr>
                        <td class="label-class">图片</td>
                        <td class="print-content1">
                            <div class="attachment-content">
                                <div v-for="item in picUrls" class="attachment-box">
                                    <img :src="item" class="attachment-class" @click="previewFile(item)">
                                </div>
                            </div>
                        </td>
                    </tr> -->
                    <tr>
                        <td class="print-label">报废原因</td>
                        <td class="print-area-content">
                            {{ form.reason }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">备注</td>
                        <td class="print-area-content">
                            {{ form.remark }}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label-line" colspan="4">审批信息</td>
                    </tr>
                    <tr>
                        <td class="print-table-line" colspan="4">
                            <PrintFlowHistoryCpt :taskId="id"></PrintFlowHistoryCpt>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import printJS from 'print-js'
import formatUtil from '@/utils/format.js'
import PrintFlowHistoryCpt from '../components/PrintFlowHistoryCpt.vue'

export default {
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    components: {
        PrintFlowHistoryCpt
    },
    setup(props, ctx) {
        const state = reactive({
            form: {
                id: '',
                projectId: '',
                projectCode: '',
                projectName: '',
                reason: '',
                deviceData: [],
                devices: '',
                pics: '',
                remark: '',
                processData: []
            },
            picUrls: [],
            flowList: []
        })

        const loadDetail = () => {
            http.fetchForm({
                url: '/yunying/deviceDiscard/findById',
                method: 'get',
                data: {
                    id: props.id
                }
            }).then((res) => {
                let data = res.data
                data['deviceData'] = JSON.parse(data.devices)
                state.form = data
                state.processData = data.processData
                state.showProcess = true

                let pics = data.pics
                if (pics != '') {
                    let list = pics.split(',')
                    let picUrls = []
                    for (let i = 0; i < list.length; i++) {
                        let url = import.meta.env.VITE_API_URL + '/attachment/' + list[i]
                        picUrls.push(url)
                    }
                    state.picUrls = picUrls
                }
            })
        }

        const onPrint = () => {
            printJS({
                printable: 'deviceDispatchPrint',
                type: 'html',
                targetStyles: ['*'],
                style: '@page{margin-top: 1mm;margin-bottom: 1mm;}'
            })
        }

        onMounted(() => {
            loadDetail()
        })

        return {
            formatUtil,
            ...toRefs(state),
            onPrint
        }
    }
}
</script>
<style scoped>
@import '@/assets/css/print.css';
</style>
